<template>
	<div class="w1024-wrap" :class="step==2?'step2':''">
		<div class="page">

			<p class="page-title" v-if="scene==1">{{step==1?'新建集团':'订单确认'}}</p>
			<p class="page-title" v-if="scene==3">续费</p>
			<p class="page-title" v-if="scene==4">添加成员</p>
			<div class="info-block">
				<template v-if="scene==1">
					<div class="form-item">
						<p class="form-item-title">集团名称：</p>
						<div class="form-item-content">
							<el-input v-if="step==1" v-model="form.circleoldname" placeholder="请输入集团名称"></el-input>
							<div v-else class="info-para">{{form.circleoldname}}</div>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">联系人：</p>
						<div class="form-item-content">
							<el-input v-if="step==1" v-model="form.linkman" placeholder="请输入联系人"></el-input>
							<div v-else class="info-para">{{form.linkman}}</div>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">联系电话：</p>
						<div class="form-item-content">
							<el-input v-if="step==1" v-model="form.linkphone" placeholder="请输入联系电话"></el-input>
							<div v-else>{{form.linkphone}}</div>
						</div>
					</div>
				</template>

				<div class="form-item">
					<p class="form-item-title">{{scene==3?'续费成员：':'成员号码：'}}</p>
					<div class="form-item-content clear">
						<template v-if="step==1">
							<div v-if="scene!=3" class="clear">
								<div class="left" style="width: 310px;">
									<el-input @blur="checkNumber" @input="numberErrorTip='';stopInput()" class="left" :autosize="false" :rows="8" type="textarea" v-if="step==1" v-model="numberStr" placeholder="若要添加多个号码，号码之间使用“换行符（回车）”分隔，一个号码为一行，移动、联通固话无法受理，如号码过多，可选择右侧批量导入"></el-input>
									<p class="error-number-tip">{{numberErrorTip}}</p>
								</div>

								<div class="left" style="margin-left: 30px;">
									<div class="upload-wrap">
										<el-button @click="selectFile" type="primary" style="width: 100%;">
											上传成员号码表
											<input class="hide" @change="readText" type="file" ref="file" accept=".txt" />
										</el-button>
										<p class="upload-tip">成员号码模板展示，仅限TXT格式，每行一个 号码，固话请加区号，固话间不要有符号<br/>现支持移动、电信号码开通挂短业务</p>
										<p class="number-tip" style="margin-top: 14px;">注：1、电信所有省份暂停受理</p>
										<p class="number-tip" style="padding-left: 24px;">2、移动河北省,湖北省,西藏省暂停受理，其他省份可正常受理</p>
									</div>
								</div>
								<p v-if="fileName" class="filename left">{{fileName}}</p>
							</div>
							<div class="number-list-wrap" v-if="scene==3">
								<div class="number-list-inner clear">
									<p v-for="(item,index) in numberList" class="number-item2 flex flex-align-center flex-justify-between">
										{{item}}
										<i @click="deleteNumber(index)" class="el-icon-delete"></i>
									</p>
								</div>
							</div>
						</template>
						<template v-else>
							<div class="number-item" v-for="item in numberList">{{item}}</div>
						</template>

					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">号码统计：</p>
					<div class="form-item-content">
						<div class="para bold">
							<span style="margin-right: 18px;">电信<font style="color: red;">{{phoneAndFeeInfo.dxnum}}</font>个</span>
							<span style="margin-right: 18px;">移动<font style="color: red;">{{phoneAndFeeInfo.ydnum}}</font>个</span>
							<span style="margin-right: 18px;">联通<font style="color: red;">{{phoneAndFeeInfo.ltnum}}</font>个</span>
						</div>
					</div>
				</div>
			</div>
			<div class="info-block">
				<div class="form-item">
					<p class="form-item-title" style="line-height: 40px;">套餐类型：</p>
					<div class="form-item-content">
						<template v-if="step==1">
							<el-radio-group v-if="scene!=3" @change="queryPhoneAndFee()" size="large" v-model="form.smstype">
								<el-radio-button :label="1">挂机短信（文字版）</el-radio-button>
								<!--<el-radio-button :label="2">挂机短信（视频版）</el-radio-button>
								<el-radio-button disabled :label="3">挂短+彩铃</el-radio-button>-->
							</el-radio-group>
							<div v-else style="line-height: 40px;" class="info-para bold">{{productNameList[form.smstype-1]}}</div>
						</template>
						<div v-else class="info-para">{{productNameList[form.smstype-1]}}</div>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title" style="line-height: 36px;">选择套餐：</p>
					<div class="form-item-content">
						<el-radio-group size="medium" @change="queryPhoneAndFee" v-if="step==1" v-model="form.comboid">
							<el-radio-button label="1">基础套餐</el-radio-button>
							<!--<el-radio-button label="2">标准套餐</el-radio-button>-->
							<el-radio-button label="3">高级套餐</el-radio-button>
						</el-radio-group>
						<div v-else class="info-para" style="display: inline-block;margin-right: 30px;">{{comboidList[form.comboid-1]}}</div>
						<fee-detail :smstype="form.smstype"></fee-detail>
					</div>
				</div>
				<!--<div class="form-item">
					<p class="form-item-title" style="line-height: 36px;">套餐说明：</p>
					<div class="form-item-content" style="padding-top: 2px;">
						<p class="para">
							<span style="margin-right: 14px;">电信</span>
							<span style="margin-right: 14px;"><font style="color: red;">{{phoneAndFeeInfo.dxfee?phoneAndFeeInfo.dxfee/100:0}}</font>元/月</span>
							<span style="margin-right: 14px;">含<font style="color: red;">{{phoneAndFeeInfo.dxquantity}}</font>条短信</span>
						</p>
						<p class="para">
							<span style="margin-right: 14px;">移动</span>
							<span style="margin-right: 14px;"><font style="color: red;">{{phoneAndFeeInfo.ydfee?phoneAndFeeInfo.ydfee/100:0}}</font>元/月</span>
							<span style="margin-right: 14px;">含<font style="color: red;">{{phoneAndFeeInfo.ydquantity}}</font>条短信</span>
						</p>
						<p class="para">
							<span style="margin-right: 14px;">联通</span>
							<span style="margin-right: 14px;"><font style="color: red;">{{phoneAndFeeInfo.ltfee?phoneAndFeeInfo.ltfee/100:0}}</font>元/月</span>
							<span style="margin-right: 14px;">含<font style="color: red;">{{phoneAndFeeInfo.ltquantity}}</font>条短信</span>
						</p>
					</div>
				</div>-->
				<div class="form-item">
					<p class="form-item-title" style="line-height: 36px;">有效期：</p>
					<div class="form-item-content">
						<template v-if="step==1">
							<el-radio-group size="medium" @change="queryPhoneAndFee" v-if="form.circletype==1" v-model="form.openmonth">
								<el-radio-button class="month" label="1">1个月</el-radio-button>
								<!--<el-radio-button class="month" label="3">3个月</el-radio-button>-->
								<!--<el-radio-button class="month" label="6">6个月</el-radio-button>-->
								<el-radio-button class="month" label="12">12个月</el-radio-button>
							</el-radio-group>
							<div v-else class="info-para" style="font-size: 16px;line-height: 36px;"><b>{{form.openmonth}}个月</b></div>
						</template>

						<div v-else class="info-para">{{form.openmonth}}个月</div>
					</div>
				</div>
				<div class="form-item" v-if="scene!=3">
					<p class="form-item-title" style="line-height: 36px;">生效开始时间：</p>
					<div class="form-item-content">
						<template v-if="step==1">
							<el-radio-group size="medium" v-if="form.circletype==1" v-model="form.begintime">
								<el-radio-button label="1">本月</el-radio-button>
								<el-radio-button label="2">下月</el-radio-button>
							</el-radio-group>
							<div v-else class="info-para" style="font-size: 16px;line-height: 36px;"><b>{{form.begintime==1?'本月':'下月'}}</b></div>
						</template>
						<div v-else class="info-para">{{form.begintime==1?'本月':'下月'}}</div>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">资费：</p>
					<div class="form-item-content">
						<p class="para fee" :class="scene==3?'bold':''">
							<span style="margin-right: 25px;">电信</span>
							<span style="margin-right: 25px;">号码<font style="color: red;">{{phoneAndFeeInfo.dxnum}}</font>个</span>
							<span style="margin-right: 25px;">单价<font style="color: red;">{{phoneAndFeeInfo.dxfee/100}}</font>元/月</span>
							<span style="margin-right: 25px;">总价<font style="color: red;">{{phoneAndFeeInfo.dxfee*phoneAndFeeInfo.dxnum*form.openmonth/100}}</font>元</span>
						</p>
						<p class="para fee" :class="scene==3?'bold':''">
							<span style="margin-right: 25px;">移动</span>
							<span style="margin-right: 25px;">号码<font style="color: red;">{{phoneAndFeeInfo.ydnum}}</font>个</span>
							<span style="margin-right: 25px;">单价<font style="color: red;">{{phoneAndFeeInfo.ydfee/100}}</font>元/月</span>
							<span style="margin-right: 25px;">总价<font style="color: red;">{{phoneAndFeeInfo.ydfee*phoneAndFeeInfo.ydnum*form.openmonth/100}}</font>元</span>
						</p>
						<p class="para fee" :class="scene==3?'bold':''">
							<span style="margin-right: 25px;">联通</span>
							<span style="margin-right: 25px;">号码<font style="color: red;">{{phoneAndFeeInfo.ltnum}}</font>个</span>
							<span style="margin-right: 25px;">单价<font style="color: red;">{{phoneAndFeeInfo.ltfee/100}}</font>元/月</span>
							<span style="margin-right: 25px;">总价<font style="color: red;">{{phoneAndFeeInfo.ltfee*phoneAndFeeInfo.ltnum*form.openmonth/100}}</font>元</span>
						</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title" style="line-height: 40px;">共计支付：</p>
					<div class="form-item-content">
						<p class="total-money">
							<span style="font-size: 30px;">{{totalMoney}}</span> 元
						</p>
					</div>
				</div>
			</div>
			<div class="info-block">
				<div class="form-item" v-if="scene!=3" style="margin-bottom: 30px!important;">
					<div class="form-item-title">
						<p>资质上传：</p>
						<p @click="qualificationDesVisible=true" class="qualification-desc">资质说明</p>
					</div>
					<div class="form-item-content">
						<template v-if="step==1">
							<div class="clear" v-if="phoneAndFeeInfo.dxnum" style="margin-bottom: 16px;">
								<div class="left" style="width: 450px;">
									<div class="form-item flex" style="margin-bottom: 0;display: flex;">
										<p class="form-item-title flex-noshrink text-left" style="width: 56px;position: relative;">电信</p>
										<div class="form-item-content" style="padding-left:0;padding-top: 8px;overflow: hidden;">
											<div class="imgs-wrap clear">
												<image-uploader ref="qualificationurldx" :imageUrl="form.qualificationurldx" @success="(img)=>{imageUploadSuccess('qualificationurldx',0,img)}" :fileSizeLimit="500" class="upload-wrapper" accept=".png,.jpg">
													<div class="upload-bg" v-if="!form.qualificationurldx">
														<p class="img-tip">营业执照</p>
													</div>
													<template v-if="form.qualificationurldx">
														<div class="operate-wrap flex flex-align-center flex-justify-arround">
															<img :src="change" @click="changeFile('qualificationurldx')" />
															<img :src="del" @click="delFile('qualificationurldx',index)" />
														</div>
													</template>
												</image-uploader>
											</div>
										</div>
									</div>
								</div>
								<div class="left" style="width: 368px;">
									<div class="form-item" style="margin-bottom: 0;">
										<p class="form-item-title" style="width: 90px;">参考示例：</p>
										<div class="form-item-content" style="padding-left: 90px;padding-top: 8px;">
											<div class="imgs-wrap clear">
												<img style="width: auto;" @click="viewImage(yyzz)" :src="yyzz" class="upload-wrapper" />
											</div>

										</div>
									</div>
								</div>
							</div>
							<div class="clear" v-if="phoneAndFeeInfo.ydnum" style="margin-bottom: 16px;">
								<div class="left" style="width: 450px;">
									<div class="form-item flex" style="margin-bottom: 0;display: flex;">
										<p class="form-item-title flex-noshrink text-left" style="width: 56px;position: relative;">移动</p>
										<div class="form-item-content" style="padding-left:0;padding-top: 8px;overflow: hidden;">
											<div class="imgs-wrap clear">
												<image-uploader ref="qualificationurlyd" :imageUrl="form.qualificationurlyd" @success="(img)=>{imageUploadSuccess('qualificationurlyd',0,img)}" :fileSizeLimit="500" class="upload-wrapper" accept=".png,.jpg">
													<div class="upload-bg" v-if="!form.qualificationurlyd">
														<p class="img-tip">营业执照</p>
													</div>
													<template v-if="form.qualificationurlyd">
														<div class="operate-wrap flex flex-align-center flex-justify-arround">
															<img :src="change" @click="changeFile('qualificationurlyd')" />
															<img :src="del" @click="delFile('qualificationurlyd')" />
														</div>
													</template>
												</image-uploader>
												<!--<image-uploader ref="promisematerial" :imageUrl="form.promisematerial" @success="(img)=>{imageUploadSuccess('promisematerial',0,img)}" :fileSizeLimit="500" class="upload-wrapper" accept=".png,.jpg">
													<div class="upload-bg" v-if="!form.promisematerial">
														<p class="img-tip">企业承诺函</p>
													</div>
													<template v-if="form.promisematerial">
														<div class="operate-wrap flex flex-align-center flex-justify-arround">
															<img :src="change" @click="changeFile('promisematerial')" />
															<img :src="del" @click="delFile('promisematerial')" />
														</div>
													</template>
												</image-uploader>-->
											</div>
										</div>
									</div>
								</div>
								<div class="left" style="width: 368px;">
									<div class="form-item" style="margin-bottom: 0;">
										<p class="form-item-title" style="width: 90px;">参考示例：</p>
										<div class="form-item-content clear" style="padding-left: 90px;padding-top: 8px;">
											<div class="imgs-wrap clear left">
												<img style="width: auto;" @click="viewImage(yyzz)" :src="yyzz" class="upload-wrapper" />
											</div>
											<!--<a class="link" download href="https://img.xnhkfpt.com/lvdata/doc/chengnuohan.doc">企业彩印业务受理承诺函(模板)下载</a>-->

										</div>
									</div>
								</div>
							</div>
							<div class="clear" v-if="phoneAndFeeInfo.ltnum" style="margin-bottom: 16px;">
								<div class="left" style="width: 450px;">
									<div class="form-item flex" style="margin-bottom: 0;display: flex;">
										<p class="form-item-title flex-noshrink text-left" style="width: 56px;position: relative;">联通</p>
										<div class="form-item-content" style="padding-left:0;padding-top: 8px;overflow: hidden;">
											<div class="imgs-wrap clear">
												<image-uploader ref="qualificationurllt" :imageUrl="form.qualificationurllt" @success="(img)=>{imageUploadSuccess('qualificationurllt',0,img)}" :fileSizeLimit="500" class="upload-wrapper" accept=".png,.jpg">
													<div class="upload-bg" v-if="!form.qualificationurllt">
														<p class="img-tip">营业执照</p>
													</div>
													<template v-if="form.qualificationurllt">
														<div class="operate-wrap flex flex-align-center flex-justify-arround">
															<img :src="change" @click="changeFile('qualificationurllt')" />
															<img :src="del" @click="delFile('qualificationurllt')" />
														</div>
													</template>
												</image-uploader>
												<image-uploader :key="index" v-for="(item,index) in acceptmaterialList" :ref="'acceptmaterial'+index" :imageUrl="item.url" @success="(img)=>{imageUploadSuccess('acceptmaterial',index,img)}" :fileSizeLimit="500" class="upload-wrapper" accept=".png,.jpg">
													<div class="upload-bg" v-if="!item.url">
														<p class="img-tip">受理单</p>
														<p class="required" v-if="acceptmaterialList.length==1&&!item.url">(必填)</p>
													</div>
													<template v-if="item.url">
														<div class="operate-wrap flex flex-align-center flex-justify-arround">
															<img :src="change" @click="changeFile('acceptmaterial'+index)" />
															<img :src="del" @click="delFile('acceptmaterial'+index,index)" />
														</div>
													</template>
												</image-uploader>
											</div>
										</div>
									</div>
								</div>
								<div class="left" style="width: 368px;">
									<div class="form-item" style="margin-bottom: 0;">
										<p class="form-item-title" style="width: 90px;">参考示例：</p>
										<div class="form-item-content clear" style="padding-left: 90px;padding-top: 8px;">
											<div class="imgs-wrap clear left">
												<img style="width: auto;" @click="viewImage(yyzz)" :src="yyzz" class="upload-wrapper" />
											</div>
											<a class="link" download :href="baseUrl+'/free/download/exportImg?url=https://img.xnhkfpt.com/lvdata/doc/shoulidan.docx&filename=中国联通商务彩铃业务受理单(统付)'">业务受理单（模板）下载</a>
											<a style="margin-top: 20px;" class="link" download :href="baseUrl+'/free/download/exportImg?url=https://img.xnhkfpt.com/lvdata/doc/shoulidan2.docx&filename=中国联通商务彩铃业务受理单(统付)-示例模板'">受理单填写示例</a>
										</div>
									</div>
								</div>
							</div>
						</template>
						<template v-else>
							<div class="form-item flex" v-if="form.qualificationurldx" style="margin-bottom: 12px!important;display: flex;">
								<p class="form-item-title flex-noshrink text-left" style="width: 56px;position: relative;">电信</p>
								<div class="form-item-content" style="padding-left: 0px;padding-top: 8px;">
									<div class="imgs-wrap clear">
										<div class="upload-wrapper" style="border: 1px solid #eee;">
											<img @click="viewImage(form.qualificationurldx)" :src="form.qualificationurldx" />
										</div>
									</div>
								</div>
							</div>
							<div class="form-item flex" v-if="form.qualificationurlyd" style="margin-bottom: 12px!important;display: flex;">
								<p class="form-item-title flex-noshrink text-left" style="width: 56px;position: relative;">移动</p>
								<div class="form-item-content" style="padding-left:0;padding-top: 8px;">
									<div class="imgs-wrap clear">
										<div class="upload-wrapper" style="border: 1px solid #eee;">
											<img @click="viewImage(form.qualificationurlyd)" :src="form.qualificationurlyd" />
										</div>
										<!--<div class="upload-wrapper" style="border: 1px solid #eee;">
											<img @click="viewImage(form.promisematerial)" :src="form.promisematerial" />
										</div>-->
									</div>
								</div>
							</div>
							<div class="form-item flex" v-if="form.qualificationurllt||acceptmaterialList[0].url" style="margin-bottom: 0;display: flex;">
								<p class="form-item-title flex-noshrink text-left" style="width: 56px;position: relative;">联通</p>
								<div class="form-item-content" style="padding-left:0;padding-top: 8px;">
									<div class="imgs-wrap clear">
										<div v-if="form.qualificationurllt" class="upload-wrapper" style="border: 1px solid #eee;">
											<img @click="viewImage(form.qualificationurllt)" :src="form.qualificationurllt" />
										</div>
										<div class="upload-wrapper" v-for="item in acceptmaterialList" v-if="item.url" style="border: 1px solid #eee;">
											<img @click="viewImage(item.url)" :src="item.url" />
										</div>
									</div>
								</div>
							</div>
						</template>
					</div>
				</div>
				<div class="form-item" v-show="step==1&&scene==1">
					<p class="form-item-title" style="line-height: 36px;">短信内容：</p>
					<div class="form-item-content">
						<!--<el-radio-group v-model="form.type">
							<el-radio :label="4" :disabled="!merchantTypeEditable">三网</el-radio>
							<el-radio :label="5">按运营商</el-radio>
						</el-radio-group>-->
						<div class="message-wrap">
							<template v-if="phoneAndFeeInfo.ltnum">
								<div class="template-box" @click="selectTemplate(index)" :class="templateIndex==index?'selected-template':''" v-for="(item,index) in templateList">
								<div class="template-item clear">
									<div class="template-item-content flex">
										{{item.smstextcontent}}
										<el-input type="textarea" rows="3" resize="none" ref="extraText" v-on:input.native="extraInput" size="mini" style="width: 400px;font-size: 16px;" v-model="extraText"></el-input><span class="length-tip"><i style="font-style: normal;" :class="extraText.length>extraTextLength?'pink':''">{{extraText.length}}</i>/{{extraTextLength}}</span>
									</div>
								</div>
							</div>
							</template>
							
							<template v-else>
								<div class="template-box" @click="selectTemplate(index)" :class="templateIndex==index?'selected-template':''" v-for="(item,index) in templateList">
									<div class="template-item clear">
										<div class="template-item-content flex">
											<textarea class="content-textarea" @input="smsInput(index)" v-model="item.smstextcontent"></textarea>
											<p><span class="length-tip"><i style="font-style: normal;" :class="item.smstextcontent.length>68?'pink':''">{{item.smstextcontent.length}}</i>/68</span></p>
										</div>
									</div>
								</div>
							</template>
						</div>
						<!--<message-editor ref="messageEditor" :groupname="form.circleoldname" :linkphone="form.linkphone" v-show="step==1" :phoneAndFeeInfo="phoneAndFeeInfo" :step="step" :scene="messageEditorScene" :merchantType="form.type" :type="form.smstype" :circlecommonuid="form.circlecommonuid" v-bind="form" @change="messageChange"></message-editor>-->
					</div>
				</div>

				<template v-if="step==2">
					<div class="form-item" v-if="form.smstextcontent">
						<p class="form-item-title">短信内容：</p>
						<div class="form-item-content">{{form.smstextcontent}}</div>
					</div>
				</template>
			</div>
			<div class="btn-wrap flex flex-justify-center">
				<template v-if="scene==1">
					<el-button v-if="step==1" size="medium" type="primary" @click="validateForm">确认提交</el-button>
					<template v-else>
						<el-button size="medium" type="primary" plain @click="step=1">返回</el-button>
						<el-button v-if="form.circletype==1" size="medium" type="primary" @click="createOrder">提交支付</el-button>
						<el-button v-if="form.circletype==2" size="medium" type="primary" @click="createOrder">确认提交</el-button>
					</template>
				</template>
				<template v-if="scene==3">
					<el-button size="medium" type="primary" plain @click="back">取消</el-button>
					<el-button size="medium" type="primary" @click="createOrder">支付</el-button>
				</template>
				<template v-if="scene==4">
					<el-button size="medium" type="primary" @click="validateForm">确认提交</el-button>
				</template>
			</div>
		</div>

		<el-dialog title="支付" @close="!paySuccess&&$router.push('/groupmanage')" :visible.sync="payConfirmVisible" :close-on-click-modal="false" width="700px" center>
			<div class="dialog-content" style="padding: 20px 10px;">
				<div class="form-item">
					<p class="form-item-title">集团名称：</p>
					<div class="form-item-content">
						{{form.circleoldname||circleoldname}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">套餐类型：</p>
					<div class="form-item-content">
						{{productNameList[form.smstype-1]}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">选择套餐：</p>
					<div class="form-item-content">
						{{comboidList[form.comboid-1]}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">套餐详情：</p>
					<div class="form-item-content">
						<p class="para">
							<span style="margin-right: 14px;">电信</span>
							<span style="margin-right: 14px;">号码<font style="color: red;">{{phoneAndFeeInfo.dxnum}}</font>个</span>
							<span style="margin-right: 14px;">单价<font style="color: red;">{{phoneAndFeeInfo.dxfee/100}}</font>元/月</span>
							<span style="margin-right: 14px;">总价<font style="color: red;">{{phoneAndFeeInfo.dxfee*phoneAndFeeInfo.dxnum*form.openmonth/100}}</font>元</span>
						</p>
						<p class="para">
							<span style="margin-right: 14px;">移动</span>
							<span style="margin-right: 14px;">号码<font style="color: red;">{{phoneAndFeeInfo.ydnum}}</font>个</span>
							<span style="margin-right: 14px;">单价<font style="color: red;">{{phoneAndFeeInfo.ydfee/100}}</font>元/月</span>
							<span style="margin-right: 14px;">总价<font style="color: red;">{{phoneAndFeeInfo.ydfee*phoneAndFeeInfo.ydnum*form.openmonth/100}}</font>元</span>
						</p>
						<p class="para">
							<span style="margin-right: 14px;">联通</span>
							<span style="margin-right: 14px;">号码<font style="color: red;">{{phoneAndFeeInfo.ltnum}}</font>个</span>
							<span style="margin-right: 14px;">单价<font style="color: red;">{{phoneAndFeeInfo.ltfee/100}}</font>元/月</span>
							<span style="margin-right: 14px;">总价<font style="color: red;">{{phoneAndFeeInfo.ltfee*phoneAndFeeInfo.ltnum*form.openmonth/100}}</font>元</span>
						</p>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">有效期：</p>
					<div class="form-item-content">
						{{form.openmonth}}个月
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">生效开始时间：</p>
					<div class="form-item-content">
						{{form.begintime==1?'当月':'次月'}}
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">资费：</p>
					<div class="form-item-content">
						<span class="money">{{form.orderfee}}元</span>
					</div>
				</div>
				<div class="form-item" v-if="discount">
					<p class="form-item-title">优惠金额：</p>
					<div class="form-item-content">
						<span class="orange">{{discount/100}}元</span>
					</div>
				</div>
				<div class="form-item" v-if="discount">
					<p class="form-item-title">实际支付：</p>
					<div class="form-item-content">
						<span class="money">{{(form.orderfee*100-discount<0?0:form.orderfee*100-discount)/100}}元</span>
					</div>
				</div>
				<p class="use-coupon" v-if="canUseCoupon" @click="selectCouponVisible=true">使用兑换券或抵用券</p>
				<div class="form-item">
					<p class="form-item-title" style="color: red;">注：</p>
					<div class="form-item-content" style="color: red;">
						请确认订购信息，提交运营商平台通过审核后，将不予退款。
					</div>
				</div>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="goOrder">取 消</el-button>
			    <el-button type="primary" @click="confirmPay">确 认</el-button>
			  </span>
		</el-dialog>
		<el-dialog top="30vh" :visible.sync="dialogVisible" width="700px" center>
			<div class="success-content">
				<img :src="success" class="success-icon" />
				<p class="success-text">订购成功</p>
				<p class="success-para">已完成下单操作，如需查看请前往订单管理查看订单详情。</p>
			</div>

			<span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="goOrder">确 认</el-button>
			  </span>
		</el-dialog>
		<el-dialog class="qualification-des" title="资质说明" top="30vh" :visible.sync="qualificationDesVisible" width="600px">
			<div class="dialog-content" style="padding:20px 10px 20px 0;">
				<div class="form-item">
					<p class="form-item-title">中国移动：</p>
					<div class="form-item-content">
						营业执照<span style="font-size: 14px;color: #666;">（非必填）</span>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">中国电信：</p>
					<div class="form-item-content">
						营业执照<span style="font-size: 14px;color: #666;">（非必填）</span>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">中国联通：</p>
					<div class="form-item-content flex" style="align-items: flex-start;">
						<span>营业执照<font style="font-size: 14px;color: #666;">（非必填）</font></span>
						<span style="margin-left: 40px;">业务受理单<span style="font-size: 14px;color: red;">（必填）</span></span>
						<a class="link" download :href="baseUrl+'/free/download/exportImg?url=https://img.xnhkfpt.com/lvdata/doc/shoulidan2.docx&filename=中国联通商务彩铃业务受理单(统付)'">下载</a>
					</div>
				</div>
			</div>

			<div slot="footer" class="dialog-footer text-center">
				<el-button type="primary" @click="qualificationDesVisible=false">确 定</el-button>
			  </div>
		</el-dialog>
		<coupon ref="coupon" style="z-index: 99999;" :id="order.ticketuid" :show="selectCouponVisible" @closeCoupon="closeCoupon" @select="selectCoupon"></coupon>
		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
	</div>
</template>

<script>
	import { baseUrl,phoneReg, deepClone } from "@/utils/common"
	import MessageEditor from '@/components/MessageEditor'
	import ImageUploader from '@/components/ImageUploader'
	import Coupon from '@/components/Coupon'
	import FeeDetail from '@/components/FeeDetail'

	import change from '@/assets/images/change.png'
	import del from '@/assets/images/del.png'
	import success from '@/assets/images/success.png'
	import yyzz from '@/assets/images/hangupMessage/zhizhao.jpg'
	export default {
		name: 'GroupManage',
		components: {
			ImageUploader,
			MessageEditor,
			Coupon,
			FeeDetail,
		},
		data() {
			return {
				change,
				del,
				success,
				yyzz,
				
				baseUrl,
				timer:null,
				timer2:null,
				scene: this.$route.params.scene, //1 新建集团,3续费,4添加成员
				step: 1,
				dialogVisible: false,
				payConfirmVisible: false,
				selectCouponVisible: false,

				qualificationDesVisible: false,

				canUseCoupon:true,
				numberStr: '',
				numberErrorTip: '', //成员号码错误提示
				circleoldname: '',

				acceptmaterialList: [{
					url: ''
				}],
				fileName: '',
				productNameList: ['挂机短信（文字版）', '挂机短信（视频版）', '挂短+彩铃'],
				comboidList: ['基础套餐', '标准套餐', '高级套餐'],
				numberList: [],
				extraText:'',
				templateIndex:0,
				templateList:[{
					smstextcontent: '{集团名称}感谢您的致电！'
				}],
				defaultTemplateList: [{
					smstextcontent: '{集团名称}感谢您的致电！'
				},{
					smstextcontent: '感谢您致电{集团名称}，我们秉承顾客至上、用心服务的宗旨。竭诚为您提供优质贴心的服务！'
				},{
					smstextcontent: '感谢您的接听, {集团名称}竭诚为您服务，如有疑问请联系我们，联系电话{联系电话}'
				},{
					smstextcontent: '{集团名称}，感谢您的致电！顾客至上用心服务是我们的宗旨。竭诚为您提供优质贴心的服务！'
				}],
				phoneAndFeeInfo_: {
					ydfee: 0,
					dxfee: 0,
					ltfee: 0,
					dxnum: 0,
					ydnum: 0,
					ltnum: 0,
					dxquantity: 0,
					ydquantity: 0,
					ltquantity: 0,
				},
				phoneAndFeeInfo: {},
				form: {
					circlecommonuid: this.$route.params.circlecommonuid,
					circletype: this.$route.params.circletype,
					circleoldname: '',
					linkman: '',
					linkphone: '',
					phones: '',
					comboid: 1,
					smstype: 1,
					openmonth: 12,
					begintime: 1,

					qualificationurldx: '',
					qualificationurlyd: '',
					qualificationurllt: '',
//					promisematerial: '',
					acceptmaterial: '',

					smstextcontent: '', //短信内容
					smsvideocontent: '',
					smsvideoimg: '',

					orderfee: 0,
					producttype: 'hangup',
				},
				discount: 0,
				order: {},
			}
		},
		computed: {
			extraTextLength(){
			 	return 68-this.templateList[0].smstextcontent.length
			},
			totalMoney() {
				return(this.phoneAndFeeInfo.ydfee * this.phoneAndFeeInfo.ydnum + this.phoneAndFeeInfo.dxfee * this.phoneAndFeeInfo.dxnum + this.phoneAndFeeInfo.ltfee * this.phoneAndFeeInfo.ltnum) * this.form.openmonth / 100
			},
			messageEditorScene() {
				return(this.scene == 1 || this.scene == 2) ? 'addGroup' : 'addMember'
			}
		},
		watch:{
			'form.circleoldname'(newVal,oldVal){
				this.defaultTemplateList.forEach((item)=>{
					item.smstextcontent=item.smstextcontent.replace(oldVal||'{集团名称}',newVal||'{集团名称}')
				})
				this.templateList.forEach((item)=>{
					item.smstextcontent=item.smstextcontent.replace(oldVal||'{集团名称}',newVal||'{集团名称}')
				})
				
			},
			'form.linkphone'(newVal,oldVal){
				this.defaultTemplateList.forEach((item)=>{
					item.smstextcontent=item.smstextcontent.replace(oldVal||'{联系电话}',newVal||'{联系电话}')
				})
				this.templateList.forEach((item)=>{
					item.smstextcontent=item.smstextcontent.replace(oldVal||'{联系电话}',newVal||'{联系电话}')
				})
			}
		},
		mounted() {
			if(this.form.circletype == 2) {
				this.form.openmonth = 12
				this.form.begintime = 1
			}
			if(this.scene == 3) {
				var list = this.$store.state.numberList
				var numberList = [],
					memberIds = []
				for(var i = 0; i < list.length; i++) {
					numberList.push(list[i].phone)
					memberIds.push(list[i].memberId)
				}
				this.numberList = numberList
				this.memberIds = memberIds
				var groupInfo = this.$store.state.groupInfo
				this.form.circlecommonuid = groupInfo.circlecommonuid
				this.form.circleoldname = groupInfo.circleoldname
				this.form.smstype = groupInfo.smstype

			}
			if(this.scene == 4) {
				var groupInfo = this.$store.state.groupInfo
				this.form.circleoldname = groupInfo.circleoldname
				this.form.linkphone = groupInfo.linkphone
			}
			this.queryPhoneAndFee()
			console.log(this.form)
		},
		methods: {
			extraInput(){
				if(this.extraText.length>this.extraTextLength){
					this.msgError('长度超出限制')
				}
			},
			smsInput(index){
				console.log(this.templateList[index].smstextcontent)
				if(this.templateList[index].smstextcontent.length>68){
					this.msgError('长度超出限制')
				}
			},
			stopInput:function(){
				if(this.inputTimer){
					clearTimeout(this.inputTimer)
				}
				this.inputTimer=setTimeout(()=>{
					this.queryPhoneAndFee()
				},300)
			},
			selectFile: function() {
				this.$refs.file.value = ''
				this.$refs.file.click()
			},
			readText() {
				var file = this.$refs.file.files[0];
				var reader = new FileReader();
				reader.readAsText(file);
				var _this = this
				reader.onload = function(data) {
					_this.numberStr = this.result
					_this.checkNumber()
				}
			},
			checkNumber: function(flag) {
				var list = this.numberStr.split(/\s/)
				var errorNumberList = []
				var list_ = []
				var numberMap = {}
				list.forEach((item) => {
					numberMap[item] = numberMap[item] ? numberMap[item] + 1 : 1
					if(!(/^1[3456789]\d{9}$/.test(item) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(item) || /^400-[016789]\d{2}-\d{4}$/.test(item) || /^([0-9]{3,4})?[0-9]{7,8}$/.test(item) || /^400[016789]\d{2}\d{4}$/.test(item)) && item) {
						errorNumberList.push(item)
					}
					if(/^1[3456789]\d{9}$/.test(item) || /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(item) || /^400-[016789]\d{2}-\d{4}$/.test(item) || /^([0-9]{3,4})?[0-9]{7,8}$/.test(item) || /^400[016789]\d{2}\d{4}$/.test(item)) {
						list_.push(item)
					}
				})
				if(errorNumberList.length) {
					this.numberErrorTip = errorNumberList.join('、') + '号码有误，请检查！'
					return false
				}
				for(var number in numberMap) {
					if(numberMap[number] > 1) {
						this.msgError(number + '号码重复')
						return false
						break;
					}
				}
				this.numberList = list_
				if(flag!=1){
					this.queryPhoneAndFee()
				}
				if(this.numberList.length) {
					this.verifyExistPhone()
				}
				return true
			},
			queryPhoneAndFee() {
				console.log({
					phones: this.numberList.join(','),
					comboid: this.form.comboid,
					smstype: this.form.smstype,
					month: Number(this.form.openmonth),
				})
				this.$request.queryPhoneAndFee({
					phones: this.numberList.join(','),
					comboid: this.form.comboid,
					smstype: this.form.smstype,
					month: this.form.openmonth,
				}).then(res => {
					if(res.code == 0) {
						this.phoneAndFeeInfo = Object.assign(deepClone(this.phoneAndFeeInfo_), res)
						if(this.phoneAndFeeInfo.ltnum){
							this.templateList=[deepClone(this.defaultTemplateList[0])]
							this.extraText=''
							this.templateIndex=0
						}else{
							this.templateList=deepClone(this.defaultTemplateList)
						}
					} else {
						this.msgError(res.msg)
					}
				})
			},
			verifyExistPhone() {
				this.$request.verifyExistPhone({
					phones: this.numberList.join(','),
				}).then(res => {
					if(res.code == 0) {

					} else {
						this.msgError(res.msg)
					}
				})
			},
			deleteNumber(index) {
				if(this.numberList.length == 1) {
					this.msgError('至少保留一个号码')
					return
				}
				this.numberList.splice(index, 1)
				this.queryPhoneAndFee()
			},
			imageUploadSuccess(prop, index, img) {
				if(img.code == 0) {
					if(prop != 'acceptmaterial') {
						this.form[prop] = img.uploadpath
					} else {
						this.acceptmaterialList[index].url = img.uploadpath
						var list = []
						for(var i = 0; i < this.acceptmaterialList.length; i++) {
							if(this.acceptmaterialList[i].url) {
								list.push(this.acceptmaterialList[i].url)
							}
						}
						if(list.length == this.acceptmaterialList.length) {
							this.acceptmaterialList.push({
								url: ''
							})
						}
					}
				}
			},
			changeFile(prop) {
				if(!prop.includes('acceptmaterial')) {
					this.$refs[prop].selectFile()
				} else {
					this.$refs[prop][0].selectFile()
				}

			},
			delFile(prop, index) {
				if(!prop.includes('acceptmaterial')) {
					this.form[prop] = ''
				} else {
					this.acceptmaterialList[index].url = ''
					if(this.acceptmaterialList.length > 1) {
						this.acceptmaterialList.splice(index, 1)
					}
				}
			},
			selectTemplate(index){
				this.templateIndex=index
			},
			validateForm() {
				console.log(this.form)
				var form = this.form
				var list = []
				for(var i = 0; i < this.acceptmaterialList.length; i++) {
					if(this.acceptmaterialList[i].url) {
						list.push(this.acceptmaterialList[i].url)
					}
				}

				let checkPhoneResult = this.checkNumber(1)
				if(!checkPhoneResult) {
					return
				}
				form.smstextcontent=this.templateList[this.templateIndex].smstextcontent+(this.phoneAndFeeInfo.ltnum?this.extraText:'')
				
				if(this.scene != 4 && !form.circleoldname) {
					this.msgError('请输入集团名称')
				} else if(this.scene != 4 && !form.linkman) {
					this.msgError('请输入联系人姓名')
				} else if(this.scene != 4 && !form.linkphone) {
					this.msgError('请输入联系电话')
				} else if(this.scene != 4 && !phoneReg.test(form.linkphone)) {
					this.msgError('联系电话格式错误')
				} else if(!this.numberList.length) {
					this.msgError('请添加成员号码')
				} else if(this.phoneAndFeeInfo.ltnum && !list.length) {
					this.msgError('请上传联通受理单')
				} else if(!form.smstextcontent) {
					this.msgError('请输入短信内容')
				} else if(form.smstextcontent.length > 68) {
					this.msgError('短信内容超过68个字符')
				} else if(form.smstype == 2 && !form.smsvideoimg && !form.smsvideocontent) {
					this.msgError('视频短信中的图片和视频至少上传一项')
				} else {
					this.form.phones = this.numberList.join(',')
					this.form.acceptmaterial = list.join(',')
					this.form.orderfee = this.totalMoney
					if(this.scene == 1) {
						this.step = 2
					} else {
						if(!this.form.orderfee){
							this.$request.queryPhoneAndFee({
								phones: this.numberList.join(','),
								comboid: this.form.comboid,
								smstype: this.form.smstype,
								month: this.form.openmonth,
							}).then(res => {
								if(res.code == 0) {
									this.phoneAndFeeInfo = Object.assign(deepClone(this.phoneAndFeeInfo_), res)
									this.form.orderfee=(this.phoneAndFeeInfo.ydfee * this.phoneAndFeeInfo.ydnum + this.phoneAndFeeInfo.dxfee * this.phoneAndFeeInfo.dxnum + this.phoneAndFeeInfo.ltfee * this.phoneAndFeeInfo.ltnum) * this.form.openmonth / 100
									if(this.phoneAndFeeInfo.ltnum){
										this.templateList=[deepClone(this.defaultTemplateList[0])]
										this.extraText=''
										this.templateIndex=0
									}else{
										this.templateList=deepClone(this.defaultTemplateList)
									}
									this.createOrder()
								} else {
									this.msgError(res.msg)
								}
							})
						}else{
							this.createOrder()
						}
					}
				}
			},
			async createOrder() {
				if(this.network) {
					return
				}
				console.log(this.order)
				if(this.order.ordernum) {
					this.msgError('已存在待支付订单，请先前往订单管理或集团管理支付或取消该订单')
					//					this.$refs.coupon.selectedIndex = 0
					//					this.discount = 0
					//					this.payConfirmVisible = true
					return
				}
				this.form.phones = this.numberList.join(',')
				this.form.orderfee = this.totalMoney
				if(this.form.openmonth==12){
					this.queryExistAward()
				}
				this.network = true
				var res
				if(this.scene == 1) {
					console.log(this.form)
					res = await this.$request.addGroup(this.form)
				}
				if(this.scene == 3) {
					var formData = {
						circlecommonuid: this.form.circlecommonuid,
						phones: this.form.phones,
						renewcomboid: this.form.comboid,
						renewfee: this.form.orderfee,
						renewmonth: this.form.openmonth,
						smstype: this.form.smstype,
						circletype: this.form.circletype,
						hangup_member_id: this.memberIds.join()
					}
					console.log(formData)
					res = await this.$request.renewMember(formData)
				}
				if(this.scene == 4) {
					this.circleoldname = this.form.circleoldname
					delete this.form.circleoldname
					delete this.form.linkman
					delete this.form.linkphone
					console.log(this.form)
					res = await this.$request.addMember(this.form)
				}
				if(res.code == 0) {
					//个付
					if(this.form.circletype == 2) {
						this.dialogVisible = true
						this.network = false
						return
					}
					var {
						ordernum,
						orderuid,
						circlecommonuid
					} = res
					this.order = {
						ordernum,
						orderuid,
						circlecommonuid,
						ticketuid: '',
						producttype: 'hangup'
					}
					this.payConfirmVisible = true
					this.$store.commit('setWaitPayCount')
				} else {
					this.msgError(res.msg)
				}
				this.network = false
			},
			queryExistAward(){
				this.$request.queryExistAward()
				.then(res=>{
					if(res.code==0&&res.size){
						this.canUseCoupon=false
					}
				})
			},
			confirmPay() {
				if(this.timer2){
					clearTimeout(this.timer2)
				}
				if(this.network) {
					return
				}
				this.network = true
				this.$request.pay(this.order).then(res => {
					if(res.code == 0) {
						this.paySuccess=true
						this.payConfirmVisible = false
						this.dialogVisible = true
						this.$store.commit('setWaitPayCount')
						this.timer=setTimeout(() => {
							this.$router.push('/groupmanage')
						}, 2000)
					} else {
						this.msgError(res.msg)
					}
					this.network = false
				})

			},
			goOrder() {
				clearTimeout(this.timer)
				this.$router.push('/groupmanage')
			},
			selectCoupon(coupon) {
				this.discount = coupon.discount_ticket_price
				this.order.ticketuid = coupon.discount_myticket_uid
			},
			closeCoupon() {
				this.selectCouponVisible = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.length-tip{
		margin-left: -4px;
		padding-left: 8px;
		font-size: 14px;
	}
	.w1024-wrap {
		.page {
			padding-left: 20px;
			padding-right: 20px;
		}
		.page-title {
			height: 78px;
			line-height: 78px;
			color: #333;
			font-size: 18px;
			padding-left: 10px;
			font-weight: bold;
		}
		.info-block {
			border-top: 1px solid #f5f5f5;
			padding-top: 24px;
			.form-item {
				display: block;
				margin-bottom: 24px;
				position: relative;
				.form-item-title {
					font-size: 16px;
					width: 138px;
					position: absolute;
					left: 0;
					top: 0;
					.qualification-desc {
						color: red;
						font-size: 14px;
						line-height: 14px;
						font-weight: bold;
						margin-right: 24px;
						cursor: pointer;
						margin-top: 4px;
						text-decoration: underline;
					}
				}
				.form-item-content {
					font-size: 16px;
					width: auto;
					float: none;
					padding-left: 138px;
					.el-input {
						width: 310px;
					}
					.link {
						color: #0088EA;
						float: right;
						width: 128px;
						font-size: 16px;
						text-align: center;
						line-height: 20px;
						text-decoration: underline;
						&:visited {
							color: #0088EA;
						}
					}
					.error-number-tip {
						line-height: 24px;
						margin-top: 8px;
						color: red;
						font-size: 14px;
					}
					.number-tip{
						width: 400px;
						font-size: 12px;
						color: red;
						line-height: 20px;
					}
					.number-item {
						line-height: 32px;
						margin-right: 29px;
						float: left;
						font-weight: normal;
					}
					.number-list-wrap {
						overflow: hidden;
						.number-list-inner {
							margin-top: -20px;
							margin-left: -20px;
							.number-item2 {
								width: 138px;
								height: 32px;
								background: #F1F1F1;
								margin-left: 20px;
								margin-top: 20px;
								padding: 0 11px;
								font-size: 14px;
								float: left;
								.el-icon-delete {
									color: rgb(8, 141, 236);
									cursor: pointer;
								}
							}
						}
					}
					>>>.el-radio-button {
						margin-right: 30px;
					}
					>>>.el-radio-button__inner {
						border-radius: 6px;
						border: 1px solid #EEEEEE;
						box-shadow: none;
						color: #333;
						font-weight: bold;
						font-size: 16px;
						padding: 11px 20px;
						min-width: 106px;
					}
					>>>.el-radio-button__orig-radio:checked+.el-radio-button__inner {
						color: #FFF;
						background-color: #409EFF;
						border-color: #409EFF;
					}
					>>>.el-radio-button--medium .el-radio-button__inner {
						padding: 9px 20px;
					}
					.upload-wrap {
						width: 280px;
						.upload-tip {
							font-size: 14px;
							line-height: 24px;
							margin-top: 7px;
						}
					}
					.filename {
						width: 200px;
						height: 32px;
						color: #666;
						font-size: 14px;
						line-height: 32px;
						background: #F5F5F5;
						border-radius: 2px;
						margin-left: 8px;
						display: flex;
						justify-content: space-between;
						padding-right: 10px;
						padding-left: 8px;
						text-align: left;
						box-sizing: border-box;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.info-para {
						line-height: 32px;
						font-size: 18px;
					}
					.para {
						line-height: 32px;
						font-weight: normal;
					}
					.total-money {
						color: #F39800;
						font-weight: bold;
						font-size: 18px;
					}
					
					.message-wrap{
						border: 1px solid #ddd;
						border-radius: 4px;
						margin-top: 10px;
						padding: 12px;
						.template-box {
							width: 100%;
							padding: 8px 13px;
							border: 1px solid #EEEEEE;
							border-radius: 4px;
							margin-bottom: 20px;
							color: #333;
							cursor: pointer;
							&:last-child {
								margin-bottom: 0;
							}
							.template-item {
								line-height: 24px;
							}
							.template-item-title {
								width: 86px;
								text-align: right;
								padding-right: 4px;
								float: left;
							}
							.template-item-content {
								>>>.el-input__inner{
									height: 24px;
									line-height: 24px;
									display: block;
									font-size: 14px;
								}
								.content-textarea{
									flex-grow: 1;
									height: 48px;
									line-height: 24px;
									resize: none;
									color: #333;
									font-size: 16px;
									padding: 0 8px;
								}
								.image-wrap {
									width: 100px;
									height: 100px;
									position: relative;
									background: #f5f5f5;
									margin-top: 4px;
									img,
									video {
										width: 100%;
										height: 100%;
										display: block;
									}
									.cover {
										position: absolute;
										width: 100%;
										height: 100%;
										left: 0;
										top: 0;
										.el-icon-video-play {
											width: 40px;
											height: 40px;
											color: #fff;
											font-size: 40px;
										}
									}
								}
							}
						}
					}
					
					.selected-template {
						background: #0088EA;
						color: #fff;
						border-color: #0088EA;
						.template-item{
							color: #fff;
						}
						.content-textarea{
							color: #fff!important;
						}
					}
				}
			}
		}
		.imgs-wrap {
			margin-left: -20px;
			margin-top: -20px;
		}
		.upload-wrapper {
			width: 100px;
			height: 100px;
			margin-left: 20px;
			margin-top: 20px;
			float: left;
			background: #f5f5f5;
			position: relative;
			>img {
				width: 100%;
				height: 100%;
			}
			.upload-bg {
				width: 100%;
				height: 100%;
				background: url(../../../assets/images/upload-bg.png);
				.img-tip {
					color: #ccc;
					font-size: 14px;
					line-height: 20px;
					padding-top: 12px;
					text-align: center;
				}
				.required{
					font-size: 12px;
					color: red;
					margin-top: 30px;
				}
			}
			&:hover {
				.operate-wrap {
					display: flex;
				}
			}
			.operate-wrap {
				position: absolute;
				width: 100%;
				height: 24px;
				left: 0;
				bottom: 0;
				background: rgba(255, 0, 0, 0.8);
				opacity: 0.8;
				display: none;
				padding: 0 10px;
			}
			.operate-wrap .operate {
				width: 20px;
				height: 20px;
				cursor: pointer;
			}
		}
		.el-dialog__body {
			padding: 16px 16px 24px;
			.dialog-content {
				border-top: 1px solid #eee;
				border-bottom: 1px solid #eee;
				min-height: 184px;
				padding: 12px 10px 0;
				.form-item {
					display: block;
					margin-right: 0;
					margin-bottom: 8px;
					.form-item-title {
						width: 130px;
						font-weight: bold;
					}
					.form-item-content {
						color: #333;
						width: auto;
						font-weight: normal;
						.money {
							color: #F75124;
							font-size: 16px;
							font-weight: bold;
						}
					}
				}
				.use-coupon {
					text-align: center;
					color: #409EFF;
					text-decoration: underline;
					line-height: 32px;
					cursor: pointer;
					font-size: 14px;
				}
			}
			.success-content {
				text-align: center;
				.success-icon {
					width: 70px;
					height: 70px;
					display: block;
					margin: 0 auto;
				}
				.success-text {
					font-size: 20px;
					font-weight: bold;
					color: #333333;
					line-height: 40px;
					margin-top: 4px;
				}
				.success-para {
					font-size: 16px;
					margin-top: 7px;
				}
			}
			
		}
	}
	.qualification-des{
		.form-item{
			font-size: 16px;
			.form-item-title{
				font-size: 16px;
			}
			.link {
				color: #409EFF;
			    text-decoration: underline;
			    margin-left: 40px
			}
		}
	}
	.step2 {
		.form-item {
			margin-bottom: 8px!important;
			.form-item-title {
				line-height: 32px!important;
			}
			.form-item-content {
				font-weight: bold;
				line-height: 32px!important;
				.form-item-title {
					font-weight: normal;
				}
				.fee {
					font-weight: bold!important;
				}
				.fee-btn {
					height: 32px!important;
				}
			}
		}
	}
</style>